<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <div class="header d-flex mb-20">
      <el-form inline>
        <el-form-item
          :label="$t('zhuapaijilu.shaixuantiaojian')"
          prop="elevatorName"
        >
          <el-input
            v-model="elevatorName"
            :placeholder="$t('diantiguanli.diantimingcheng')"
          />
        </el-form-item>
        <MyButton class="confirm" @click="handleConfirm">{{
          $t("common.confirmQueding")
        }}</MyButton>
      </el-form>
    </div>
    <MyTable
      :data="tableData"
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        sortable
        width="130"
        type="index"
        :label="$t('common.order_number')"
      ></el-table-column>
      <el-table-column
        prop="elevatorName"
        :label="$t('diantiguanli.diantimingcheng')"
        sortable
        min-width="160"
      >
      </el-table-column>
      <el-table-column
        prop="signalState"
        :label="$t('diantiguanli.diantikaiguan')"
        sortable
        min-width="160"
        :format="formatStatus"
      >
        <template slot-scope="scope">
          <i
            v-if="scope.row.signalState == 1"
            class="equipment-status status-green"
          ></i>
          <i v-else class="equipment-status status-red"></i>
          <span>{{ formatStatus(scope.row.signalState) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="100">
        <template slot-scope="scope">
          <MyButton
            class="text"
            v-if="scope.row.lib_type !== 0"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.edit") }}
          </MyButton>
        </template>
      </el-table-column>
    </MyTable>
    <EditDialog
      :visible.sync="isAddDialogShow"
      :row="row"
      :imageUrl="imageUrl"
      :type="editType"
      @refresh="getList"
    />
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getElevatorList} from "./service";
import EditDialog from "./EditDialog.vue";
import util from "@/utils";
import {getImg} from "./service";
import * as CONSTANT from "./CONSTANT";
export default {
  components: {
    MyButton,
    EditDialog,
  },
  data() {
    const { status_list } = CONSTANT;
    return {
      elevatorName: "",
      tableData: [],
      row: {},
      imageUrl:"",
      editType: "add",
      isAddDialogShow: false,
      lib_type: void 0,
      status_list,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleManagement(row) {
      if (row.lib_type === 0) {
        this.$router.push({
          name: "greyList",
        });
        localStorage.setItem("curR", "library");
      } else {
        this.$router.push({
          name: "targets",
          query: { lib_name: row.lib_name, lib_id: row.lib_id },
        });
      }
    },
    handleConfirm() {
      this.getList();
    },
    async getList() {
      const res = await getElevatorList({ elevatorName: this.elevatorName });
      this.tableData= res.data.rows;
      // this.tableData = res.rows((item) => {
      //   return {
      //     ...item,
      //     create_time: item.create_time || "--",
      //   };
      // });
    },
    formatStatus(cellValue) {
      return this.status_list.find((item) => item.value == cellValue).label;
    },
    handleAdd() {
      this.isAddDialogShow = true;
      this.editType = "add";
      this.row = {};
      this.imageUrl = "";
    },
    handleEdit(row) {
      this.isAddDialogShow = true;
      this.editType = "edit";
      this.row = { ...row };

        getImg(row.imgUrl).then(res => {
            if(res.code == 200){
                this.imageUrl = "data:image/jpeg;base64,"+res.data;
            }
        })
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("dituguanli.deletePromit"),
        this.$t("dituguanli.delete_map"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        let res = await deleteMap([row.mapId]);
        if (res.code == 200) {
          util.msg.success("deleteSuccess");
          this.getList();
        }
        // 直接删除
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
  .equipment-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .status-green {
    background: #4dd964;
  }
  .status-red {
    background: #ef5350;
  }
</style>
